<template>
  <div :class="'nav-bar ' + (!show && $route.path != '/blog' ? 'nav-transparent' : '')">
    <div class="nav-wrapper">
      <div class="logo"><a href="/blog">AcBlog</a></div>
      <ul class="nav-menu">
        <li class="nav-item"><a href="/index"><span>后台管理</span></a></li>
        <li class="nav-item"><a href="/" @click.prevent="logout"><span>退出</span></a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      scrollTop: 0
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scroll);
  },
  methods: {
    scroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.show = this.scrollTop > 60;
    },
    logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {});
    }
  }
}
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
  }

  .nav-bar {
    position: fixed;
    height: 64px;
    line-height: 64px;
    width: 100%;
    background-image: linear-gradient(to right, #6853F2 0%, #2FAAB9 100%);
    opacity: 0.8;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 7px 10px 0 rgba(0, 0, 0, 0.12);
    color: #fff;
    font-size: 14px;
    outline: none;
    z-index: 100;
  }

  .nav-transparent {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
  }

  .nav-wrapper {
    position: relative;
    width: 80%;
    max-width: 1125px;
    margin: 0 auto;
  }

  .logo {
    float: left;
    display: inline-block;
    vertical-align: top;
    font-size: 2rem;
    cursor: pointer;
  }

  .nav-menu {
    float: right;
  }

  .nav-item {
    float: left;
    transition: background-color .3s;
    list-style-type: none;
  }

  .nav-item a {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    z-index: 1;
    transition: .3s ease-out;
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    background-color: transparent;
    padding: 0 15px;
  }

  .nav-item a:hover {
    background-color: rgba(0,0,0,0.1);
  }
</style>
